<template xmlns:el-col="http://www.w3.org/1999/html">
  <div class="container">
    <el-container direction="vertical">
      <el-row>
        <el-col :span="4">
          <el-select v-model="role" placeholder="请选择身份"
                     style="width: 100%" @change="getUserList">
            <el-option
              v-for="item in roles"
              :key="item.label"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-input
            style="width: 100%"
            placeholder="请输入ID或姓名"
            prefix-icon="el-icon-search"
            v-model.trim="keywords"
            @keyup.native.enter="getUserList"
            clearable
          >
          </el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="getUserList">
            查询
          </el-button>
        </el-col>
        <!--v-on指令：绑定属性-->
        <el-col :span="4" :offset="1">
          <!--$router.push('/home/user/add')：静态ajxs-->
          <el-button type="success" style="width: 100%" @click="$router.push('/home/user/add')">添加用户</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-table
          :data="userList"
          style="width: 100%;"
          highlight-current-row
        >
          <el-table-column
            prop="id"
            label="用户ID"
            width="150">
          </el-table-column>
          <el-table-column
            prop="userName"
            label="姓名"
            width="150">
          </el-table-column>
          <el-table-column
            prop="sex"
            label="性别"
            width="150">
          </el-table-column>
          <el-table-column
            prop="age"
            label="年龄"
            width="150">
          </el-table-column>
          <el-table-column
            prop="role"
            label="身份"
            width="150">
            <template slot-scope="scope">
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.role }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="住址"
            width="200">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                size="mini"
                @click="handleEdit(scope.row)">
              </el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                size="mini"
                @click="handleDelete(scope.$index,scope.row)">
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <el-pagination
          background
          @current-change="currentChange"
          layout="prev,pager,next"
          :total="totalPage">
        </el-pagination>
      </el-row>
      <el-dialog
        title="修改用户信息"
        :visible.sync="dialogVisible"
        width="30%"
        >
        <div>
          <el-form :model="userInfo" ref="userInfo" label-width="60px">
            <el-form-item label="ID" prop="id">
              <el-input v-model="userInfo.id" disabled></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="userName">
              <el-input v-model="userInfo.userName" clearable ></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-select v-model="userInfo.sex" style="width: 100%" >
                <el-option
                  v-for="item in sex"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input v-model="userInfo.age" clearable></el-input>
            </el-form-item>
            <el-form-item label="身份" prop="role">
              <el-select v-model="userInfo.role" style="width: 100%" >
                <el-option
                  v-for="item in userRoles"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="住址" prop="address">
              <el-input type="textarea" v-model="userInfo.address"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm('userInfo')">修改</el-button>
  </span>
      </el-dialog>
    </el-container>
  </div>

</template>

<script>
  import Qs from 'qs'
  export default {
    name: "UserPage",
    data(){
      return{
        dialogVisible: false,
        roles:[
          {value:null,label:'全部'},
          {value:'管理员',label:'管理员'},
          {value:'学生',label:'学生'},
          {value:'食堂',label:'食堂'}
        ],
        sex:[
          {id:1,name:'男'},
          {id:2,name:'女'},
          {id:3,name:'未知'}
        ],
        userRoles:[
          {id:1,name:'管理员'},
          {id:2,name:'学生'},
          {id:3,name:'食堂'}
        ],
        userList: [],
        role: '',
        keywords: '',
        currentPage: 1,
        pageSize: 10,
        totalCount: 0,
        totalPage: 0,
        userInfo: {}
      }
    },
    computed: {
      search() {
        return this.keywords;
      }
    },
    watch: {
      search(newValue, oldValue) {
        if (newValue === "") {
          //如果为空，执行方法获取list
          this.getUserList();
        }
      }
    },
    methods:{
      getUserList(){
        this.$http.get('/user/query',{
          params:{
            role:this.role,
            keywords:this.keywords,
            pageSize:this.pageSize,
            currentPage:this.currentPage
          }
        }).then((response)=>{
          if(response.status === 200){
            if(response.data.code === 10000){
              this.totalCount = response.data.data.totalCount;
              this.totalPage = response.data.data.totalPage * 10;
              this.userList = response.data.data.data;
            }else{
              this.userList = [];
              this.$notify.error({
                title: '错误',
                message: response.data.msg,
                duration: 1000
              });
            }
          }else{
            this.$notify.error({
              title: '错误',
              message: response.status + response.statusText,
              duration: 1000
            });
          }
        })
      },
      currentChange(pageNo){
        this.currentPage = pageNo;
        this.getUserList();
      },
      handleEdit(row){
        this.dialogVisible = true;
        this.userInfo = JSON.parse(JSON.stringify(row));
      },
      handleDelete(index,row){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = Qs.stringify({
            id:row.id
          })
          this.$http.post('/user/del',params)
            .then((response)=>{
              if(response.status === 200){ // 先判断状态码
                if(response.data.code === 10000){ // 再判断结果码
                  this.$notify({
                    title: '成功',
                    message: response.data.data,
                    type:'success',
                    duration: 1000
                  });
                  this.getUserList();
                }else{
                  this.$notify.error({
                    title: '错误',
                    message: response.data.msg,
                    duration: 1000
                  });
                }
              }else{
                this.$notify.error({
                  title: '错误',
                  message: response.status + response.statusText,
                  duration: 1000
                });
              }
            })
        });
      },
      submitForm(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let params = Qs.stringify(this.userInfo);
            this.$http.put('/user/info', params).then((response) => {
              if (response.status === 200) {
                if (response.data.code === 10000) {
                  this.$notify({
                    title: '修改成功',
                    type: 'success',
                    duration: 1000
                  });
                  this.dialogVisible = false;
                  this.getUserList();
                } else {
                  this.$notify.error({
                    title: '错误',
                    message: response.data.msg
                  });
                }
              } else {
                this.$notify.error({
                  title: '错误',
                  message: response.status + response.statusText,
                  duration: 1000
                });
              }
            })
          }
        });
      },
    },
    created() {
      this.getUserList();
    }
  }

</script>

<style scoped>
.el-row{
  margin-bottom: 15px;
}
</style>
